<template>
  <div v-loading.fullscreen.lock="pageLoading">
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">明细表</span>
        </el-col>
      </div>
      <el-form :model="criteriaForm" ref="basisForm" size="mini" label-width="65px">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="入库日期">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="rangeInStockTime"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开海外仓=处理时间"
                              end-placeholder="非海外仓=入库时间" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="入库时间">
              <el-date-picker type="datetimerange" :editable="false" :picker-options="pickerOptions" v-model="rangeInStockTime1"
                              format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" start-placeholder="开海外仓=处理时间"
                              end-placeholder="非海外仓=入库时间" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="结算日期">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="rangeCostDate"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                              end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="创建日期">
              <el-date-picker type="datetimerange" :editable="false" :picker-options="pickerOptions" v-model="rangeCreateTime"
                              format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" start-placeholder="开始日期"
                              end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="费用名称" v-model="criteriaForm.costIds">
              <el-select v-model="criteriaForm.costIds" filterable multiple placeholder="请选择费用名称" :style="{width: '100%'}">
                <el-option v-for="(item, value) in configPayMap" :key="value" :label="item" :value="value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="阿米巴科目名称" v-model="criteriaForm.amoebaSubjectIds" label-width="100px">
              <el-select v-model="criteriaForm.amoebaSubjectIds" filterable multiple placeholder="请选择阿米巴科目名称" :style="{width: '100%'}">
                <el-option v-for="(item, value) in amoebaSubjectNameMap" :key="value" :label="item" :value="value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="阿米巴关联科目" v-model="criteriaForm.settleAmoebaSubjectIds" label-width="100px">
              <el-select v-model="criteriaForm.settleAmoebaSubjectIds" filterable multiple placeholder="请选择阿米巴关联科目" :style="{width: '100%'}">
                <el-option
                  v-for="(item, value) in amoebaSubjectNameMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="阿米巴费用来源" v-model="criteriaForm.originType" label-width="100px">
              <el-select v-model="criteriaForm.originType" filterable placeholder="请选择阿米巴费用来源" :style="{width: '100%'}">
                <el-option v-for="(item, value) in originTypeMap" :key="value" :label="item" :value="value"/>
              </el-select>
            </el-form-item>


          </el-col>
          <el-col :span="6">
            <el-form-item label="客户">
              <el-select v-model="criteriaForm.customerId" filterable :filter-method="remoteCustomer" placeholder="请选择客户" :style="{width: '100%'}">
                <el-option v-for="item in customerMap" :key="item.id" :label="item.text" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属人">
              <el-select v-model="criteriaForm.settleManId" filterable clearable placeholder="请选择所属人" :style="{width: '100%'}">
                <el-option v-for="(item, value) in userMap" :key="value" :label="item" :value="value"/></el-select>
            </el-form-item>
            <el-form-item label="所属部门">
              <el-select v-model="criteriaForm.belongDepartIds" placeholder="请选择所属部门" multiple filterable :style="{width: '100%'}">
                <el-option v-for="(item, value) in belongGroupMap" :key="value" :label="item" :value="parseInt(value)"/>
              </el-select>
              <div v-if="hasSelect == 1">
                <el-tag type="info" size="mini" v-for="(item,value) in selectMap" :key="value" :label="item" style="margin-right:10px" @click="selectDepart(value)">{{item}}</el-tag>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="运单号" prop="waybillNoText">
              <el-input v-model="criteriaForm.waybillNoText" type="textarea" placeholder="请输入运单号,多个换行隔开"
                        :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="M单号" prop="masterNumberText">
              <el-input v-model="criteriaForm.masterNumberText" type="textarea" placeholder="请输入M单号,多个换行隔开"
                        :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px;margin-bottom: 30px">
          <el-col :span="6" style="margin-left: 10px;">
            <el-button size="small" type="primary" @click="doExportAmoebaDetail"
              >导出</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { ajax,searchCustomerLimit } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";

export default {
  components: {},
  props: [],
  data() {
    return {
      pageLoading: false,
      criteriaForm: {
        startInStockTime: "",
        endInStockTime: "",
        customerId: "",
        startCostDate: "",
        endCostDate: "",
        settleManId: "",
        startCreateTime: "",
        endCreateTime: "",
        saleBelongGroupIds: "",
        waybillNoText: "",
        masterNumberText: "",
        costIds: "",
        amoebaSubjectIds: "",
        settleAmoebaSubjectIds: "",
        originType: "",
        belongDepartIds: []
      },
      rangeInStockTime: null,
      rangeInStockTime1: null,
      rangeCostDate: null,
      rangeCreateTime: null,
      userDepartSelectMap: {},
      selectMap: { '0': '销售部', '1': '全选', '-1': '全不选'},
      hasSelect: 0,
      customerMap: {},
      userMap: [],
      belongGroupMap: [],
      saleBelongGroupIds: [],
      configPayMap: [],
      amoebaSubjectNameMap: [],
      originTypeMap: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initAmoebaProfit();
  },
  methods: {
    selectDepart(op){
      const departIds = this.userDepartSelectMap[op];
      console.log(departIds);
      this.criteriaForm.belongDepartIds = departIds;
    },
    initAmoebaProfit() {
      ajax("toExportAmoebaDetail", {})
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            // this.customerMap = res.data.customerMap;
            this.userMap = res.data.userMap;
            this.belongGroupMap = res.data.belongGroupMap;
            this.hasSelect = res.data.hasSelect;
            this.userDepartSelectMap = res.data.userDepartSelectMap;
            this.configPayMap = res.data.configPayMap;
            this.amoebaSubjectNameMap = res.data.amoebaSubjectNameMap;
            this.originTypeMap = res.data.originTypeMap;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    async remoteCustomer(query){
      if (query !== '') {
        this.customerMap = await searchCustomerLimit(query);
      }else {
        this.customerMap = {};
      }
    },
    doExportAmoebaDetail() {
      if(this.rangeInStockTime){
        this.criteriaForm.startInStockTime = this.rangeInStockTime[0];
        this.criteriaForm.endInStockTime = this.rangeInStockTime[1];
      }
      if(this.rangeInStockTime1){
        this.criteriaForm.startInStockTime = this.rangeInStockTime1[0];
        this.criteriaForm.endInStockTime = this.rangeInStockTime1[1];
      }
      if(this.rangeCostDate){
        this.criteriaForm.startCostDate = this.rangeCostDate[0];
        this.criteriaForm.endCostDate = this.rangeCostDate[1];
      }
      if(this.rangeCreateTime){
        this.criteriaForm.startCreateTime = this.rangeCreateTime[0];
        this.criteriaForm.endCreateTime = this.rangeCreateTime[1];
      }
      this.pageLoading = true;
      let attrs = {};
      attrs["headers"] = {
        "YG-UNIQUE-KEY": "do_export_amoeba_detail" + new Date().getTime()
      };
      ajax("doExportAmoebaDetail", this.criteriaForm)
        .then(res => {
          console.log(res);
          if (res.path) {
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              //qiao.bs.alert("导出失败");
              this.$message.error(res.errorMesage);
            }
            this.pageLoading = false;
          } else {
            if (res.errorMesage){
              //
              this.$message.error(res.errorMesage);
            }else{
              this.$message.error("数据为空");
            }
            this.pageLoading = false;
          }
        })
        .catch(error => {
          console.log(error);
          this.pageLoading = false;
        });
    }
  }
};
</script>
<style></style>
